<template>
  <div class="startMain">
    <!-- title -->
    <div class="title">
      <h1>仿真训练管理系统</h1>
      <h4>Simulation training management system</h4>
    </div>
    <!-- swiper -->
    <div class="swiperBox">
      <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
        <swiper-slide>
          <div class="swiperSlideBox" @click="slideHandle(0)">
            <img src="../../assets/images/menu01Icon.png" alt="仿真训练态势" />
            <h3>仿真训练态势</h3>
            <h5>situational</h5>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="swiperSlideBox" @click="slideHandle(1)">
            <img
              src="../../assets/images/menu02Icon.png"
              alt="训练策划管理分系统"
            />
            <h3>训练策划管理分系统</h3>
            <h5>planning</h5>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="swiperSlideBox" @click="slideHandle(2)">
            <img
              src="../../assets/images/menu03Icon.png"
              alt="分析决策分系统"
            />
            <h3>分析决策分系统</h3>
            <h5>analysis</h5>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="swiperSlideBox" @click="slideHandle(3)">
            <img
              src="../../assets/images/menu04Icon.png"
              alt="服务支持分系统"
            />
            <h3>服务支持分系统</h3>
            <h5>service</h5>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="swiperSlideBox" @click="slideHandle(4)">
            <img src="../../assets/images/menu05Icon.png" alt="系统运维管理" />
            <h3>系统运维管理</h3>
            <h5>operations</h5>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import $ from 'jquery'
export default {
  components: { swiper, swiperSlide },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
  },
  data() {
    return {
      swiperOption: {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        spaceBetween: 90,
        // loop: true,
        coverflowEffect: {
          rotate: 30,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
        on: {
          slideChangeTransitionEnd: function () {
            let activeIndex = this.activeIndex
            $('.swiper-slide')
              .removeClass('swiper-slide-active')
              .eq(activeIndex)
              .addClass('swiper-slide-active')
            $('.swiperSlideBox').css('opacity', 0.4)
            $('.swiper-slide-active').find('.swiperSlideBox').css('opacity', 1)
          },
        },
      },
      timer: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      let swiperSlideShadowLeft = $('.swiper-slide-shadow-left')
      swiperSlideShadowLeft.siblings('.swiperSlideBox').css('opacity', 0.4)
      $('.swiper-slide')
        .removeClass('swiper-slide-active')
        .eq(2)
        .addClass('swiper-slide-active')
      $('.swiper-slide-active').find('.swiperSlideBox').css('opacity', 1)
      this.swiper.slideToLoop(2, 1000, false)
    })
  },
  methods: {
    slideHandle(num) {
      this.swiper.slideToLoop(num, 1000, false) //切换到第一个slide，速度为1秒
      $('.swiperSlideBox').css('opacity', 0.4)
      $('.swiper-slide-active').find('.swiperSlideBox').css('opacity', 1)
      this.timer = setTimeout(() => {
        this.jumpPage(num)
      }, 1500)
    },
    jumpPage(num) {
      clearTimeout(this.timer)
      switch (num) {
        case 0:
          this.$router.push('/')
          break
        case 1:
          this.$router.push('/')
          break
        case 2:
          this.$router.push('/')
          break
        case 3:
          this.$router.push('/')
          break
        case 4:
          this.$router.push('/')
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/globalVariable.scss';
.startMain {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  background: url('../../assets/images/startBodyBg.jpg') no-repeat center center;
  background-size: cover;
  .title {
    width: 696px;
    height: 134px;
    background: url('../../assets/images/startHeaderTitleBg.png') no-repeat
      center center;
    background-size: 100% 100%;
    margin: 0 auto;
    @include margin(54vh, 'top');
    h1 {
      margin: 0;
      padding-top: 26px;
      line-height: 54px;
      color: #fff;
      text-align: center;
      font-weight: bold;
      font-size: 40px;
      letter-spacing: 4px;
    }
    h4 {
      margin: 0;
      line-height: 30px;
      color: #fff;
      text-align: center;
      font-weight: 400;
      font-size: 20px;
      text-transform: uppercase;
      color: #79a3c2;
    }
  }
  .swiperBox {
    // padding: 150px 70px 0;
    @include padding(150vh, 'top');
    @include padding(70vw, 'left');
    @include padding(70vw, 'right');
    .swiperSlideBox {
      // width: 323px;
      // height: 469px;
      @include w(323vw);
      @include h(469vh);
      background: url('../../assets/images/menuBgActive.png') no-repeat center
        center;
      background-size: 100% 100%;
      // padding-top: 100px;
      @include padding(100vh, 'top');
      box-sizing: border-box;
      img {
        // width: 150px;
        // height: 150px;
        @include w(150vw);
        @include h(150vh);
        display: block;
        margin: 0 auto;
      }
      h3 {
        // margin-top: 50px;
        // font-size: 24px;
        @include margin(50vh, 'top');
        @include fs(24vh);
        font-weight: bold;
        color: #fff;
      }
      h5 {
        // font-size: 18px;
        @include fs(18vh);
        color: #a2bdce;
        text-transform: uppercase;
        // margin-top: 15px;
        @include margin(15vh, 'top');
      }
    }
  }
}
.swiper {
  width: 100%;
  // padding-top: 50px;
  // padding-bottom: 50px;
  @include padding(50vh, 'top');
  @include padding(50vh, 'bottom');
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  // width: 323px;
  // height: 469px;
  @include w(323vw);
  @include h(469vh);
}

.swiper-slide img {
  display: block;
  width: 100%;
}
:deep .swiper-container-3d .swiper-slide-shadow-left {
  background: none;
}
:deep .swiper-container-3d .swiper-slide-shadow-right {
  background: none;
}
</style>
